<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Axios发送ajax请求</title>
    <script
      src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"
      crossorigin="anonymous"
    ></script>
  </head>
  <body>
    <button>get</button>
    <button>post</button>
    <button>axios</button>

    <script>
      const btns = document.querySelectorAll("button");

      //   配置baseURL
      axios.defaults.baseURL = "http://127.0.0.1:8080";

      btns[0].onclick = function () {
        axios
          .get("/axios-server", {
            // 参数
            params: {
              id: 1,
              score: 100,
            },
            //   请求头信息
            headers: {
              name: "mannoname",
            },
          })
          .then((value) => {
            console.log(value);
          });
      };

      btns[1].onclick = function () {
        axios.post(
          "/axios-server",
          //   请求体
          {
            username: "mannoname",
            age: 21,
          },
          {
            // 参数
            params: {
              id: 2,
              score: 98,
            },
            //   请求头信息
            headers: {
              name: "mannoname",
            },
          }
        );
      };

      btns[2].onclick = function () {
        axios({
          //   请求方式
          method: "POST",
          //   URL
          url: "/axios-server",
          //   参数
          params: {
            id: 3,
            score: 99,
          },
          // 请求头
          headers: {
            a: 100,
            b: 200,
          },
          // 请求体
          data: {
            username: "mannoname",
            score: 100,
          },
        }).then((response) => {
          console.log(response);
          console.log(response.status);
          console.log(response.statusText);
          console.log(response.headers);
          console.log(response.data);
        });
      };
    </script>
  </body>
</html>
